<template>
  <div class="wall">
    <div class="wall-mask" :class="{mask:isShowMask}"></div>
    <time-comps class="home-time"></time-comps>
    <Search class="home-search" @showMask="showMask" />
<!--    <card-list class="commonly-used"></card-list>-->
  </div>
</template>

<script>
// 公共组件
import Search from "@/components/content/search/Search";
// 子组件引入
import TimeComps from "@/view/home/ChildComps/TimeComps";
import CardList from "@/view/home/ChildComps/CardList";

export default {
  name: "Home.vue",
  components: {TimeComps,CardList, Search,},
  data(){
    return {
      isShowMask: false
    }
  },
  methods:{
    showMask(isFoucs){
      this.isShowMask = isFoucs
    }
  }
}
</script>

<style scoped>
/*全屏壁纸*/
.wall {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~assets/img/wallpaper/6.jpg") no-repeat;
  background-size: cover;
  /*置于底层*/
  z-index: -999;
}
/*模糊层*/
.wall-mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  transition: all .3s;
  /*让页面上的东西在遮罩层之上*/
  z-index: -2;
}
.mask{
  left: -2%;
  top: -2%;
  right: -2%;
  bottom: -2%;
  box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
  filter: blur(2px);
}
/*时间部分*/
.wall .home-time{
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
}
/*搜索部分*/
.wall .home-search{
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;

}
/*常用部分*/
.wall .commonly-used{
  width: 400px;
  top: 50%;
}

</style>
